<template>
  <div class="address full-screen">
    <nav-bar>
      <span slot="text">我的收货地址</span>
    </nav-bar>
    <div class="container">
      <ul>
        <li
          v-for="(item, index) in addressList"
          :key="index"
          @click="selectAddress(item)"
        >
          <div class="content">
            <div class="text">
              {{ item.address }}
              {{ item.address_detail }}
            </div>
            <div class="user_info">
              <span>{{ item.user_name }}</span>
              <span>{{ item.sex == 1 ? '先生' : '女士' }}</span>
              <span>{{ item.phone }}</span>
            </div>
          </div>
          <i
            class="iconfont icon-bianji1"
            @click.stop="editAddress(item.id)"
          ></i>
        </li>
      </ul>
    </div>
    <footer class="new_address">
      <router-link to="/user/address/newAddress">添加新地址</router-link>
    </footer>
    <router-view />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { getAddressList } from '@/network/getData';

export default {
  data() {
    return {
      addressList: [],
      is_click: 0
    };
  },
  computed: {
    ...mapState(['userInfo'])
  },
  created() {
    this.is_click = parseInt(this.$route.query.isClick);
    this.initData();
  },
  methods: {
    ...mapMutations(['SELECT_ADDRESS']),
    initData() {
      getAddressList(this.userInfo.id).then(res => {
        this.addressList = res.data;
      });
    },
    // 选择收货地址
    selectAddress(item) {
      if (this.is_click === 1) {
        this.SELECT_ADDRESS(item);
        this.$router.go(-1);
      }
    },
    // 修改地址
    editAddress(id) {
      this.$router.push({
        path: '/user/address/editAddress',
        query: {
          id
        }
      });
    }
  },
  watch: {
    userInfo() {
      this.initData();
    }
  }
  // beforeRouteEnter(to, from, next) {
  //   if (from.path === '/user' || from.path === '/') {
  //     next(vm => {
  //       vm.is_click = false;
  //     });
  //   } else {
  //     next();
  //   }
  // }
};
</script>

<style lang="less" scoped>
.container {
  padding-top: 45px;
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
    .text {
      font-size: var(--font-size);
      color: #222;
    }
    .user_info {
      margin-top: 5px;
      font-size: var(--font-min);
      span {
        margin-right: 10px;
      }
    }
  }
}
.new_address {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 45px;
  text-align: center;
  background-color: var(--color-base);
  a {
    color: #222;
  }
}
</style>
